import React, { useState } from "react";
import { Drawer, Button } from "antd";


const ValueDrawer = ({ id, visibale, changeVisibale, rangeData, callback=()=>{} }) => {

  const [currentIndex, changeCurrentIndex] = useState(0);

  const handleChangeValue = () => {
    callback(currentIndex);
  };

  return (
    <Drawer
      title="请选择需要展示的年份"
      placement="right"
      visible={visibale}
      getContainer={false}
      className="national-range-change"
      onClose={() => {
        changeVisibale(false);
      }}
    >
      <ul className="value-change">
          {
              rangeData.map((value, index) => <li onClick={()=>{changeCurrentIndex(index)}} key={index} className={currentIndex === index ? "active" : ""}>{value}</li>)
          }
      </ul>
      <Button type="primary" onClick={handleChangeValue}>
        确定
      </Button>
    </Drawer>
  );
};

export default ValueDrawer;
